<template>
  <div class="container-fluid" id="container_curr">
    <div id="content_main">
      <div id="search_container">
        <el-row
            :gutter="15"
            justify="center"
            style="width: 100%;text-align: center; height: 70px; padding-top: 20px; margin-right: 0">
          <el-col :span="2">
            <el-select v-model="journeyType">
              <el-option
                  v-for="item in journeyTypes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"></el-option>
            </el-select>
          </el-col>

          <el-col :span="4">
            <el-input v-model="flightInfo.leaveCity">
              <template #suffix>
                <span>出发地</span>
              </template>
            </el-input>
          </el-col>

          <el-col :span="1">
            <el-button   :icon="Switch" circle/>
          </el-col>

          <el-col :span="4">
            <el-input v-model="flightInfo.arriveCity">
              <template #suffix>
                <span>目的地</span>
              </template>
            </el-input>
          </el-col>

          <el-col :span="5">
            <el-date-picker
                v-model="flightInfo.leaveTime"
                type="date"
                placeholder="出发日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
            />
          </el-col>

          <el-col :span="5">
            <el-date-picker
                v-model="flightInfo.retraceTime"
                type="date"
                placeholder="返回日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
            />
          </el-col>

          <el-col :span="2">
            <el-button @click="mSearch">
              搜索
            </el-button>
          </el-col>
        </el-row>
      </div>

      <div id="dataCard" v-loading="loading">
        <el-row justify="center">
          <el-col :span="6" id="dataLeft" style="width: 280px">
            <span id="filter">
                数据来源
            </span>
            <div
                style="width: 100%; background-color: #FFFFFF;display: flex;justify-content: center;margin-bottom: 5px"
                v-for="item in company">
              <div class="company" >
                <div class="content_logo" :class="item.logo"></div>
                <strong>{{item.name}}</strong>
              </div>
            </div>


          </el-col>

          <el-col :span="17" id="dataRight">
            <div id="list_title">
              <strong>
                {{ journeyType }}:&nbsp;{{ flightInfo.leaveCity }}
                <b class="to_line"></b>
                {{ flightInfo.arriveCity }}
              </strong>
              &nbsp;&nbsp;
              <span style="font-weight: 400;font-size: 12px;color: #999;">
                  {{ date }}&nbsp;
                  <b>{{ result.length }}个航班</b>
              </span>
            </div>
            <div class="sub_title">
              <span class="up_span">
                <i style="cursor: pointer;">起飞时间</i>
                <b class="up"></b>
              </span>
              <span class="center_span">
                <i style="cursor: pointer;">到达时间</i>
                <b class="up"></b>
              </span>
              <span class="right_span">
                <i style="cursor: pointer;">价格</i>
                <b class="right"></b>
              </span>
            </div>
            <div class="d-flex flex-column" style="width: 100%">
<!--              <strong v-if="result.length === 0">无航班信息</strong>-->
              <div style="margin-bottom: 10px;display: flex;background-color: #FFFFFF;"
                  v-for="(item,index) in result">
                <div class="plane_info">
                  <div class="logo" :class="logoStyle(item.airlineCompany)">
                  </div>
                  <div class="sec">
                    <p style="font-size: 14px;font-weight: 700;">{{ item.airlineCompany }}</p>
                    <span style="font-size: 14px;color: #999;">{{ item.aircraft }}</span>
                  </div>
                </div>
                <div class="time_info">
                  <div class="start_time">
                    <strong>{{ item.planLeaveTime.split(' ')[1] }}</strong>
                    <em>{{ item.leavePort }}</em>
                  </div>
                  <div class="line_to">
                    <i>{{item.spendTime}}</i>
                    <b></b>
                  </div>
                  <div class="start_time">
                    <strong>{{ item.realLeaveTime.split(' ')[1] }}</strong>
                    <em>{{ item.arrivePort }}</em>
                  </div>
                </div>
                <div class="jiage">
                  <strong>
                    <em>￥{{ item.price }}</em>
                    <b>起</b>
                  </strong>
                </div>
                <div class="buy_button">
                  <el-button
                      @click="doThis(index)"
                      type="warning"
                      plain>选择
                  </el-button>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>

  <el-dialog
      v-model="dialogTableVisible"
      title="订票"
      :close-on-click-modal="false">
    <el-row justify="center">
      <el-col span="12">
        <el-table :data="tableData" stripe style="width: 100%; text-align: center; margin-bottom: 10px" border>
          <el-table-column prop="key" label="标签" width="100"/>
          <el-table-column prop="value" label="值" width="150"/>
        </el-table>
        <el-button style="width: 10px"
                   :disabled="ticketCount <= 0"
                   @click="ticketCount--">
          <el-icon>
            <Minus/>
          </el-icon>
        </el-button>
        &nbsp;&nbsp;{{ ticketCount }}&nbsp;
        <el-button style="width: 10px; margin-left: 5px"
                   @click="ticketCount++">
          <el-icon>
            <Plus/>
          </el-icon>
        </el-button>
      </el-col>
    </el-row>

    <template #footer>
      <span>总计<em
          style="color: #ff5346;font-size: 16px">￥{{ ticketCount * Number.parseInt(tableData[7].value) }}</em></span>&nbsp;&nbsp;
      <el-button type="success" @click="dialogConfirm">确定</el-button>
      <el-button type="warning" @click="dialogCancel">取消</el-button>
    </template>
  </el-dialog>


</template>

<script>
import {onMounted, reactive, ref, computed, useCssModule} from "vue"
import {Switch, Minus, Plus} from "@element-plus/icons-vue"
import constant from "../../constant";
import {useStore} from "vuex";
import axios from "axios";
import { ElNotification } from 'element-plus'

export default {
  name: "FlightSearchResult",
  components: {Minus, Plus},
  setup() {
    // 样式
    const style = useCssModule()
    // 购票数
    let ticketCount = ref(1)
    // 显示
    let dialogTableVisible = ref(false)
    // 加载
    let loading = ref(true)
    // 读取的所有航班信息
    let flightInfos = []
    // 结果的常量
    const tag = constant.PlaneInfo.flightInfos
    // 搜索结果
    let result = ref(tag)
    // 仓库
    let store = useStore()
    // 行程类型
    let journeyType = ref('单程')
    // 对话框
    let tableData = [
      {
        key: '出发日期',
        value: ''
      },
      {
        key: '出发地',
        value: '北京'
      },
      {
        key: '目的地',
        value: '北京'
      },
      {
        key: '出发机场',
        value: '北京'
      },
      {
        key: '到达机场',
        value: '北京'
      },
      {
        key: '航班号',
        value: '北京'
      },
      {
        key: '机型',
        value: '北京'
      },
      {
        key: '价格',
        value: '北京'
      },
    ]
    // 日期
    let date = computed(() => {
      if (flightInfo.leaveTime === '')
        return store.state.getDate('')
      else
        return store.state.getDate(flightInfo.leaveTime)
    })
    const flightInfo = reactive({
      leaveCity: '',
      arriveCity: '',
      leaveTime: '',
      retraceTime: ''
    })

    const journeyTypes = [
      {
        value: '单程',
        label: '单程'
      },
      {
        value: '回程',
        label: '回程'
      }
    ]
    // 官网
    const company = [
      {
        name: '海南航空',
        logo: style.hu
      },
      {
        name: '中国国际航空',
        logo: style.ca
      },
      {
        name: '中国联合航空',
        logo: style.kn
      },
      {
        name: '东方航空',
        logo: style.mu
      },
      {
        name: '南方航空',
        logo: style.cz
      },
      {
        name: '厦门航空',
        logo: style.mf
      },
      {
        name: '吉祥航空',
        logo: style.ho
      },
    ]

    onMounted(() => {
      flightInfo.leaveCity = store.state.flightSearchInfo.leaveCity
      flightInfo.arriveCity = store.state.flightSearchInfo.arriveCity
      flightInfo.leaveTime = store.state.flightSearchInfo.leaveTime
      flightInfo.retraceTime = store.state.flightSearchInfo.retraceTime
      setTimeout(() => {
        axios.get('/api/repertory?vehicle=plane').then((res) => {
          res.data.filter((item) => {
            dataSwap(flightInfos, item)
          })
          console.log(flightInfos)
          onSearch(flightInfos)
        })
        loading.value = false
      }, 500)
    })

    // 数据兼容
    function dataSwap(oData, item) {
      let time = item.endDate - item.startDate
      // 小时数
      let h = Math.floor(time / (1000 * 60 * 60))
      let m = Math.floor(time / (1000 * 60) % 60)
      let temp = {
        flightNo : item.no,
        airlineCompany : item.company,
        leavePort : item.startStation,
        leaveCity : item.startCity,
        arrivePort : item.endStation,
        arriveCity : item.endCity,
        planLeaveTime : store.state.getFullTime(parseInt(item.startDate)),
        realLeaveTime : store.state.getFullTime(parseInt(item.endDate)),
        price : item.price,
        aircraft : item.type,
        spendTime : h + '小时' + m + '分钟'
      }
      oData.push(temp)
    }


    // 根据出发城市过滤
    function leaveCitySearch(city, arr) {
      if (arr.length === 1) return []
      return arr.filter((item) => {
        if (item.leaveCity.includes(city)) return true
      })
    }

    // 根据目标城市过滤
    function arriveCitySearch(city, arr) {
      if (arr.length === 1) return []
      return arr.filter((item) => {
        if (item.arriveCity.includes(city)) return true
      })
    }

    // 根据出发时间过滤
    function leaveTimeSearch(date, arr) {
      if (arr.length === 1) return []
      return arr.filter((item) => {
        if (item.planLeaveTime.includes(date)) return true
      })
    }

    // 搜索逻辑
    function onSearch(data) {

      let resultTemp = leaveCitySearch(flightInfo.leaveCity, data)
      let temp = arriveCitySearch(flightInfo.arriveCity, resultTemp)
      if (temp.length !== 0) resultTemp = temp
      if (flightInfo.leaveTime !== '') {
        temp = leaveTimeSearch(flightInfo.leaveTime, resultTemp)
        if (temp.length !== 0) resultTemp = temp
      }
      result.value = resultTemp
    }

    // 搜索按钮
    function mSearch() {
      loading.value = true
      setTimeout(() => {
          axios.get('/api/repertory?vehicle=plane').then((res) => {
            res.data.filter((item) => {
              dataSwap(flightInfos, item)
            })
          })
        onSearch(flightInfos)
        loading.value = false
      }, 500)
    }

    function doThis(index) {
      let selectedData = result.value[index]
      // 出发日期
      tableData[0].value = selectedData.planLeaveTime
      // 出发地
      tableData[1].value = selectedData.leaveCity
      // 目的地
      tableData[2].value = selectedData.arriveCity
      // 出发机场
      tableData[3].value = selectedData.leavePort
      // 到达机场
      tableData[4].value = selectedData.arrivePort
      // 航班号
      tableData[5].value = selectedData.flightNo
      // 机型
      tableData[6].value = selectedData.aircraft
      // 价格
      tableData[7].value = selectedData.price
      dialogTableVisible.value = true
    }

    // logo样式
    function logoStyle(company) {
      switch (company) {
        case '海南航空'     :return style.hu
        case '中国国际航空'  :return style.ca
        case '南方航空'     :return style.cz
        case '中国联合航空'  :return style.kn
        case '东方航空'     :return style.mu
        case '厦门航空'     :return style.mf
        case '吉祥航空'     :return style.ho
      }
    }

    // 对话框确定
    function dialogConfirm() {
      dialogTableVisible.value = false
      ElNotification({
        title: '通知',
        message: '订票成功',
        type: 'success',
      })
    }

    // 对话框取消
    function dialogCancel() {
      dialogTableVisible.value = false
      ElNotification({
        title: '注意',
        message: '您取消了订票',
        type: 'warning',
      })
    }
    return {
      loading,
      journeyType,
      journeyTypes,
      Switch,
      flightInfo,
      result,
      dialogTableVisible,
      tableData,
      Minus,
      Plus,
      ticketCount,
      date,
      company,
      logoStyle,
      mSearch,
      doThis,
      dialogCancel,
      dialogConfirm,
    }
  },

}
</script>

<style scoped>
.flex-column-curr {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#container_curr {
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #F3F5F9;
  text-align: center;
}

#content_main {
  width: 1190px;
  margin: auto;
}

#search_container {
  width: 100%;
  background-color: #FFFFFF;
  margin-bottom: 20px;
  /*display: flex;*/
  /*justify-content: space-between;*/
}

#dataLeft {
  margin-right: 20px;
  height: 500px;
}

#dataRight {
  /*margin-left: 10px;*/
  /*background-color: #FFFFFF;*/
  min-height: 1000px;
}

#filter {
  background: #ebebeb;
  height: 34px;
  text-indent: 18px;
  font-size: 16px;
  display: flex;
  align-items: center;
}

#list_title {
  height: 34px;
  background: #ebebeb;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.to_line {
  width: 30px;
  height: 10px;
  margin: 0 5px;
  background: url(../../assets/toline.png) no-repeat 50%;
  background-size: contain;
  display: inline-block;
}

strong {
  font-size: 16px;
}

.sub_title {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  height: 46px;
  font-size: 14px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e4e4e4;
  background: #fff;
  box-sizing: border-box;
}

.up {
  width: 12px;
  height: 14px;
  margin-left: 5px;
  font-weight: 400;
  background: url(../../assets/up.png) no-repeat 50%;
}

.up_span {
  margin-left: 220px;
  display: flex;
  align-items: center;
  color: #333;
  font: normal normal normal 12px/20px Arial, sans-serif;
}

.center_span {
  margin-left: 140px;
  display: flex;
  align-items: center;
  color: #333;
  font: normal normal normal 12px/20px Arial, sans-serif;
}

.right_span {
  margin-left: 130px;
  display: flex;
  align-items: center;
  color: #00c77b;
  font: normal normal normal 12px/20px Arial, sans-serif;
}

.right {
  width: 12px;
  height: 14px;
  margin-left: 5px;
  font-weight: 400;
  background: url(../../assets/right.png) no-repeat 50%;
}

.plane_info {
  margin-right: 30px;
  margin-left: 30px;
  text-align: center;
  width: 160px;
  height: 108px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  position: relative;
  width: 24px;
  height: 24px;
  display: inline-block;
  margin-left: 2px;
  background-size: contain !important;
  background-position: 50% !important;
}
.content_logo {
  margin-right: 30px;
  position: relative;
  width: 32px;
  height: 32px;
  display: inline-block;
  margin-left: 2px;
  background-size: contain !important;
  background-position: 50% !important;
}


.sec {
  min-width: 112px;
  margin-left: 15px;
  -webkit-box-flex: 1;
}

.time_info {
  display: flex;
  align-items: center;
  width: 256px;
  justify-content: space-between;
}

.start_time {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.start_time strong {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 4px;
}

.start_time em {
  font-size: 12px;
  color: #999;
}

.line_to {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 12px;
}

.line_to i {
  color: #999;
  position: relative;
  font-style: normal;
}

.line_to b {
  width: 73px;
  height: 6px;
  background: url(../../assets/toline.png) no-repeat 50%;
}

.jiage {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-right: 16px;
  width: 106px;
  white-space: nowrap;
  text-align: center;
  margin-left: 106px;
}

.jiage strong {
  font-weight: 400;
}

.jiage strong em {
  color: #ff5346;
  font-size: 18px;
}

.jiage strong b {
  font-size: 14px;
}

.buy_button {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  flex-direction: column;
}

.company {
  width: 160px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}
</style>

<style module>
/* 海南航空 */
.hu {
  background: url(../../assets/images-company-logo/HU.svg) no-repeat;
}

/* 中国国际航空 */
.ca {
  background: url(../../assets/images-company-logo/CA.svg) no-repeat;
}

/* 南方航空 */
.cz {
  background: url(../../assets/images-company-logo/CZ.svg) no-repeat;
}

/* 中国联合航空 */
.kn {
  background: url(../../assets/images-company-logo/KN.svg) no-repeat;
}

/* 东方航空 */
.mu {
  background: url(../../assets/images-company-logo/MU.svg) no-repeat;
}
/* 厦门航空 */
.mf {
  background: url(../../assets/images-company-logo/MF.svg) no-repeat;
}
/* 吉祥航空 */
.ho {
  background-image: url("https://m.elongstatic.com/flight/configmng/prod/airline/logo/HO.svg?v=2023020301");
}
</style>